import React, { useMemo, useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Image,
} from 'react-native';
import { COLORS } from '../styles/constants';

export default function FoodCultureGrid({
  data = [],
  onPressItem,
  scrollEnabled = false,
}) {
  const [tab, setTab] = useState('all'); // all | food | culture
  const filtered = useMemo(() => {
    if (tab === 'all') return data;
    return data.filter(it => it.type === tab);
  }, [tab, data]);

  const renderChip = (key, label) => (
    <TouchableOpacity
      key={key}
      onPress={() => setTab(key)}
      style={[styles.chip, tab === key && styles.chipActive]}
    >
      <Text style={[styles.chipText, tab === key && styles.chipTextActive]}>
        {label}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <View style={styles.chipsRow}>
        {renderChip('all', '全部')}
        {renderChip('food', '美食')}
        {renderChip('culture', '文创')}
      </View>

      <FlatList
        data={filtered}
        keyExtractor={it => it.id}
        numColumns={2}
        columnWrapperStyle={styles.row}
        scrollEnabled={scrollEnabled}
        renderItem={({ item }) => {
          const distance = item.distance;
          return (
            <TouchableOpacity
              style={styles.card}
              onPress={() => onPressItem?.(item)}
            >
              <View style={styles.imageContainer}>
                <Image
                  source={{ uri: item.image }}
                  style={styles.img}
                  resizeMode="cover"
                />
                {distance && (
                  <View style={styles.distanceBadge}>
                    <Text style={styles.distanceText}>{distance}</Text>
                  </View>
                )}
              </View>
              <View style={styles.captionBar}>
                <Text numberOfLines={1} style={styles.caption}>
                  {item.name}
                </Text>
              </View>
            </TouchableOpacity>
          );
        }}
        showsVerticalScrollIndicator={false}
        removeClippedSubviews={scrollEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { marginHorizontal: 16, marginTop: 8 },
  chipsRow: { flexDirection: 'row', marginBottom: 12 },
  chip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    backgroundColor: COLORS.background.secondary,
    borderRadius: 16,
    marginRight: 8,
  },
  chipActive: { backgroundColor: COLORS.primaryLight },
  chipText: { color: COLORS.text.secondary, fontSize: 13, fontWeight: '600' },
  chipTextActive: { color: COLORS.primary },
  row: { justifyContent: 'space-between', marginBottom: 12 },
  card: {
    width: '48%',
    borderRadius: 12,
    backgroundColor: COLORS.white,
    overflow: 'hidden',
  },
  imageContainer: {
    position: 'relative',
    width: '100%',
    height: 120,
  },
  img: { width: '100%', height: '100%', backgroundColor: COLORS.background.tertiary },
  distanceBadge: {
    position: 'absolute',
    top: 8,
    right: 8,
    backgroundColor: COLORS.background.overlay,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  distanceText: {
    color: COLORS.white,
    fontSize: 11,
    fontWeight: '600',
  },
  captionBar: {
    backgroundColor: COLORS.white,
    paddingVertical: 10,
    paddingHorizontal: 10,
  },
  caption: { textAlign: 'center', color: COLORS.text.primary, fontWeight: '600' },
});
